<template>
  <!-- 这个页面专门来查询学生，并且可以多选学生，并把选择学生信息回传到父组件 -->
  <Dialog title="学生查询" v-model="dialogVisible" :fullscreen="true">
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="学生名称" prop="studentName" show-overflow-tooltip>
          <el-input
            v-model.trim="queryParams.studentName"
            placeholder="请输入学生名称"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="学籍号" prop="studentCode" show-overflow-tooltip>
          <el-input
            v-model.trim="queryParams.studentCode"
            placeholder="请输入学籍号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable>
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="年级" prop="grade">
          <el-select v-model="queryParams.grade" placeholder="请选择状态" clearable>
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.CMIS_GRADE_TYPE)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="在校状态" prop="state">
          <el-select
            v-model="queryParams.state"
            placeholder="请选择在校状态"
            clearable
            class="!w-240px"
          >
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.CMIS_STUDENT_STATE)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <cascadeSelection ref="selection" :useType="true" />
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <el-table
        v-loading="loading"
        :data="list"
        ref="tableRef"
        :row-key="getRowKeys"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          label="选择"
          prop="id"
          fixed="left"
          type="selection"
          :reserve-selection="true"
        />
        <el-table-column label="学生名称" prop="studentName" show-overflow-tooltip fixed="left" />
        <el-table-column label="学籍号" prop="studentCode" show-overflow-tooltip />
        <el-table-column label="学校名称" prop="schoolName" show-overflow-tooltip />
        <el-table-column label="班级名称" prop="classesName" show-overflow-tooltip />
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
    <template #footer>
      <el-button @click="submitForm" type="primary">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import * as StudentApi from '@/api/cmis/student'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { ElTable } from 'element-plus'
const tableRef = ref<typeof ElTable>() // 表格的 Ref
const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref() // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  createTime: [],
  studentName: null,
  studentCode: null,
  schoolId: null,
  collegeId: null,
  majorId: null,
  classesId: null,
  sex: null,
  grade: null,
  state: null,
  notIds: []
})
const queryFormRef = ref() // 搜索的表单

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    // 纯查询学生表
    const data = await StudentApi.queryStudentPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const selectList = ref<StudentApi.StudentVO[]>([]) // 列表的数据

/** 确定按钮操作 */
const emit = defineEmits(['success', 'add-student']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 提交请求
  try {
    dialogVisible.value = false
    // 发送操作成功的事件
    multipleSelection.value.forEach((item) => selectList.value.push({ ...item }))
    emit('add-student', selectList.value)
  } finally {
  }
}

const getRowKeys = (row) => {
  //唯一标识id，也可以是你自己数据源中的其他某个代表唯一的字
  return row.id
}

//存放当前选取的数据
const multipleSelection = ref([])

//状态变化触发
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

/** 打开弹窗 */
const open = (data) => {
  queryParams.schoolId = data.schoolId
  queryParams.collegeId = data.collegeId
  queryParams.majorId = data.majorId
  queryParams.classesId = data.classesId
  selectList.value = [] // 每次需要父组件传入
  queryParams.notIds = [] // 每次重置查询条件
  if (data.studentList) {
    selectList.value = data.studentList
    data.studentList.forEach((item) => queryParams.notIds?.push(item.id)) // 重新赋值
  }
  dialogVisible.value = true
  getList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
